<template>
  <div id="app">
    <div>
      <p>{{type[0]}}</p>
      <!--<AceJavascripttest  :height=500 :value=value :theme=theme :readOnly=false></AceJavascripttest>-->
      <AceSqlEditor  :height=500 :value=value :theme=theme :readOnly=false></AceSqlEditor>
    </div>
    <hr>
    <div class="editor-demo">
      <AceEditorDemo v-model="value" lang="sql" :theme="theme" :options="editorOptions"/>
    </div>
  </div>
</template>
<script>
import AceSqlEditor from "@/components/AceSqlEditor";
import AceEditorDemo from "@/components/AceEditorDemo";
export default {
  name: 'App',
  components:{
    AceSqlEditor,
    AceEditorDemo
  },
  data() {
    return {
      type: [
        'Sql编辑器测试',
      ],
      value:'select * from user where name=\'小皇冠\' and age > 21',
      theme:'github',
      editorOptions: {
        fontSize: '16px',
        showPrintMargin: false,
        showGutter: true,
        wrap: true,
        highlightActiveLine: true,
        useWorker: false,
        enableBasicAutocompletion: true,
        enableLiveAutocompletion: true
      }

    }
  }
}
</script>

<style>
  .editor-demo {
    margin-top: 80px;
  }
</style>